$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'biz/sendpacket/list',
        datatype: "json",
        colModel: [			
			{ label: '操作', name: 'id', index: 'id', width: 50, key: true,
				formatter: function(value, options, row) {
					var retVal = '<a href="javascript:grabPacketDetail(' + value + ')" class="label label-primary">抢包记录</a>&nbsp;';
					return retVal;
				}
			},
			{ label: '红包ID', name: 'id', index: 'id', width: 50 },
			{ label: '头像', name: 'headImg', index: 'member_id', width: 50,
				formatter: function(value, options, row) {
					return "<img style='width: 50px; height: 50px;' class='img-circle' src='" + value + "'>";
				}
			},
			{ label: '会员ID', name: 'memberId', index: 'member_id', width: 50 },
			{ label: '手机号', name: 'mobile', index: 'memberId', width: 80 }, 	
			{ label: '房间', name: 'roomName', index: 'room_id', width: 80 }, 			
			{ label: '发包金额', name: 'amount', index: 'amount', width: 80,
				formatter: function(value, options, row) {
					return '红包：<label>￥' + value + '</label><br/>已抢：<label>￥' + row.grabAmount + '</label><br/>未抢：<label>￥' + row.balanceAmount + '</label><br/>';
				}
			},
			{ label: '数量', name: 'packetQty', index: 'packet_qty', width: 80,
				formatter: function(value, options, row) {
					return '总数：<label>' + value + '个</label><br/>已抢：<label>' + row.grabQty + '个</label><br/>未抢：<label>' + row.balanceQty + '个</label><br/>';
				}
			}, 			
			{ label: '雷点', name: 'landmine', index: 'landmine', width: 30 },
			{ label: '平台抽成', name: 'fee', index: 'fee', width: 50 }, 			
			{ label: '红包状态', name: 'status', index: 'status', width: 80,
				formatter: function(value, options, row) {
					if (value == 0) {
						return '<span class="label label-primary">进行中</span>';
					} else {
						return '<span class="label label-success">已结束' + (value == 3 ? "(已退款)" : "") + '</span>';
					}
				}
			},
			{ label: '机器人', name: 'isRobot', index: 'is_robot', width: 50,
				formatter: function(value, options, row) {
					if (value == 0) {
						return '<span class="label label-primary">否</span>';
					} else {
						return '<span class="label label-danger">是</span>';
					}
				}
			},
			{ label: '发包时间', name: 'createTime', index: 'create_time', width: 80 }	
        ],
		viewrecords: true,
        height: 385,
        rowNum: 10,
		rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function() {
        	//隐藏grid底部滚动条
        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});

function grabPacketDetail(id){
	layer.open({
		  type: 1,
	      title: '抢包记录',
	      area: ['700px', '500px'],
	      content: '<table id="jqGrid1""></table><div id="jqGridPager1"></div>',
	      success: function(){
	    	  $("#jqGrid1").jqGrid({
	    	        url: baseURL + "biz/grabpacket/list1?sendPacketId=" +  id,
	    	        datatype: "json",
	    	        colModel: [			
    	       			{ label: 'id', name: 'id', index: 'id', width: 50, key: true, hidden: true },
    	    			{ label: '头像', name: 'headImg', index: 'head_img', width: 50,
    	    				formatter: function(value, options, row) {
    	    					return "<img style='width: 50px; height: 50px;' class='img-circle' src='" + value + "'>";
    	    				}
    	    			},
    	    			{ label: '会员ID', name: 'grabMemberId', index: 'grab_member_id', width: 50 },
    	    			{ label: '手机号', name: 'mobile', index: 'mobile', width: 80 },
    	    			{ label: '红包金额', name: 'grabAmount', index: 'grab_amount', width: 80,
    	    				formatter: function(value, options, row) {
    	    					return value.toFixed(2);
    	    				}
    	    			},
    	    			{ label: '是否踩雷', name: 'isLandmine', index: 'is_landmine', width: 50,
    	    				formatter: function(value, options, row) {
    	    					if (value == 0) {
    	    						return '<span class="label label-primary">否</span>';
    	    					} else {
    	    						return '<span class="label label-danger" title="-' + row.landmineAmount + '">是</span>';
    	    					}
    	    				}
    	    			}, 			
    	    			{ label: '抢包时间', name: 'createTime', index: 'create_time', width: 120 }			
    	            ],
	    			viewrecords: true,
	    	        height: 375,
	    	        rowNum: 10,
	    			rowList : [10,30,50],
	    	        rownumbers: true, 
	    	        rownumWidth: 25, 
	    	        autowidth:true,
	    	        pager: "#jqGridPager1",
	    	        jsonReader : {
	    	            root: "page.list",
	    	            page: "page.currPage",
	    	            total: "page.totalPage",
	    	            records: "page.totalCount"
	    	        },
	    	        prmNames : {
	    	            page:"page", 
	    	            rows:"limit", 
	    	            order: "order"
	    	        },
	    	        gridComplete:function(){
	    	        	//隐藏grid底部滚动条
	    	        	$("#jqGrid1").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
	    	        }
	    	    });
	      }
	});
}

var vm = new Vue({
	el:'#rrapp',
	data:{
		q: {}
	},
	methods: {
		query: function () {
			vm.reload();
		},
		reload: function (event) {
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{ 
				postData:vm.q,
                page:page
            }).trigger("reloadGrid");
		}
	}
});